import React from "react";
import { FlatList, StyleSheet, Text } from "react-native";
import { View, TouchableOpacity } from "react-native-ui-lib";
import { commonStyles } from "../../configs/commonStyle";
import BasePage from "../BasePage";
import ListSeparator from "../common/ListSeparator";
import ListEmpty from "../common/ListEmpty";
import NavigationBar from "../common/NavigationBar";
import ViewUtils from "../../utils/ViewUtils";
import { inject, observer } from "mobx-react";
import { Icon } from "../components";
import ConfirmDialog from "../common/ConfirmDialog";
import { setClipboardContent } from "../../utils/util";

/**
 * 本地日志
 */
@inject("userStore")
@observer
export default class Logs extends BasePage {

  constructor(props) {
    super(props);
    this.id;
  }

  componentDidMount() {
    super.componentDidMount();
  }

  deleteItem = () => {
    const { errorLog, setValue } = this.props.userStore;
    const tempList = errorLog.filter(data => data.id != this.id);
    logger("剩余数据", tempList);
    setValue("errorLog", tempList);
  };

  render_item = ({ item, index }) => {
    return (
      <View style={{ ...styles.item, marginTop: index == 0 ? 10 : 0 }}>
        <View>
          <Text style={commonStyles.text_black_13}>发生时间：{item?.time}</Text>
        </View>
        <View marginV-10>
          <Text style={commonStyles.text_black_13}>事件名称：{item?.eventName}</Text>
        </View>
        <View>
          <Text style={commonStyles.text_black_13}>{item?.content}</Text>
        </View>
        <View row spread>
          <TouchableOpacity padding-10 activeOpacity={1} onPress={() => setClipboardContent(`事件:${item?.eventName}\n${item.content}`)}>
            <Icon type="AntDesign" name={"copy1"} size={19} color={"#BCBCBC"} />
          </TouchableOpacity>
          {/*<TouchableOpacity padding-10 activeOpacity={1} onPress={() => {*/}
          {/*  this.selectNo = item.recordingNo;*/}
          {/*  this.confirmDialog.show("确定要删除吗？");*/}
          {/*}}>*/}
          {/*  <Icon type="AntDesign" name={"delete"} size={19} color={"#BCBCBC"} />*/}
          {/*</TouchableOpacity>*/}
        </View>
      </View>
    );
  };

  renderHeader = () => {
    return (
      <View padding-10 bg-white>
        <Text style={commonStyles.text_gray}>所有上传失败的日志,仅用于提供给开发收集问题。</Text>
      </View>
    );
  };

  render() {
    const { errorLog } = this.props.userStore;

    return (
      <View useSafeArea style={commonStyles.body_primary}>
        <NavigationBar
          title={"日志记录"}
          backgroundColor={"transparent"}
          leftButton={ViewUtils.getLeftButton(() => this._onBackPress())}
        />
        <View style={commonStyles.container}>
          <FlatList
            data={errorLog}
            showsVerticalScrollIndicator={false}
            extraData={this.state}
            style={{}}
            contentContainerStyle={{ flexGrow: 1 }}
            keyExtractor={(item, index) => "menu_" + index}
            renderItem={this.render_item}
            ItemSeparatorComponent={() => <ListSeparator height={0.5} backgroundColor={"#F7F7F7"} />}
            ListEmptyComponent={() => <ListEmpty showEmpty={IsNullOrEmpty(errorLog)} />}
          />
        </View>
        <ConfirmDialog
          ref={r => (this.confirmDialog = r)}
          callBack={this.deleteItem}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  titleWrap: {
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    backgroundColor: "#F9D63B",
    paddingHorizontal: 15,
    paddingVertical: 10,
    marginTop: 15,
  },
  item: {
    padding: 10,
    marginHorizontal: 15,
    backgroundColor: "white",
  },
});
